<template>
  <div id="app">
    <router-view></router-view>
    <keep-alive>
      <router-view name="alive"></router-view>
    </keep-alive>
    <!-- 
      组件分为基本的两种形态：
      1、动态组件：在切换底部Tabbar栏时，当切换到下一个组件时，上一个组件会被销毁，状态也会清除，当切换回去时，就无法保存当时的状态。每次切换到不同的组件时，Vue都会创建新的实例
      2、异步组件：在有些场景中，用户频繁切换的组件，我们需要缓存组件，不要每次切换时都创建新的实例对象，此时我们需要用到<keep-alive>将组件包裹起来，使用组件成为异步组件，此时组件就能被缓存下来。
     -->
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style lang='scss'>
  html, body {
    background-color: #f6f6f6;
    width: 100%;
    height: 100%;
  }

  #app {
    width: 100%;
    height: 100%;
  }

  .notice-swipe {
    height: .533333rem;
    line-height: .533333rem;
  }

  [v-cloak] {
    display: none;
  }
</style>
